<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-21 10:30:12
 * @Description  : 添加或者更新存储源
-->

<template>
  <div class="bg-lightColor storage-edit-con p-3 text-[13px]">
    <n-grid x-gap="12" :cols="1" class="mb-2">
      <n-gi>
        <n-button
          type="primary"
          size="small"
          class="!text-[13px]"
          @click="backView"
        >
          <div class="mr-2 rotate-90 transform">
            <SvgIcon icon="xiala" color="#fff" size="10px"></SvgIcon>
          </div>
          返回
        </n-button>
      </n-gi>
    </n-grid>
    <n-divider class="!my-2" />
    <n-form
      ref="storageFormRef"
      :label-width="isSmall ? 130 : 150"
      label-placement="left"
      :label-align="isSmall ? 'left' : 'right'"
      :model="storage"
      size="small"
      require-mark-placement="right"
      :rules="formRule"
    >
      <n-form-item label="存储类型：" path="type">
        <n-select
          v-model:value="storage.type"
          :options="storageOriginArr"
          :render-label="renderLabel"
          class="!w-[300px]"
        />
      </n-form-item>

      <n-form-item label="名称：" path="name">
        <n-input
          v-model:value="storage.name"
          :allow-input="noSideSpace"
          placeholder="请输入存储名称"
          clearable
          class="!w-[300px]"
          :maxlength="25"
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">用于区分不同存储</div>
      </n-form-item>
      <n-form-item label="空间大小：" path="sizeMax">
        <n-input-number
          :value="+convertBytes(storage.sizeMax, 'GB')"
          @update:value="handleByteChange"
          :min="0"
          :max="2048"
          clearable
          placeholder="请输入空间大小"
          class="!w-[300px]"
        >
          <template #suffix> GB </template>
        </n-input-number>
        <div class="ml-[12px] text-gray-400 text-[12px]">
          请根据存储源实际可用大小进行填写
        </div>
      </n-form-item>

      <n-form-item label="存储目录：" path="path">
        <n-input
          v-model:value="storage.path"
          :allow-input="noSideSpace"
          placeholder="请输入存储目录"
          clearable
          class="!w-[300px]"
        />
        <div class="ml-[12px] text-gray-400 text-[12px]">
          确保目录拥有读写权限
        </div>
      </n-form-item>

      <MyTransition>
        <div v-if="storage.type !== 'LOCAL'">
          <n-form-item label="Access Key ID：" path="accessKey">
            <n-input
              v-model:value="storage.accessKey"
              :allow-input="noSideSpace"
              placeholder="请输入Access Key ID"
              clearable
              class="!w-[300px]"
            />
          </n-form-item>
          <n-form-item label="Access Key Secret：" path="accessSecret">
            <n-input
              v-model:value="storage.accessSecret"
              :allow-input="noSideSpace"
              placeholder="请输入Access Key Secret"
              type="password"
              clearable
              class="!w-[300px]"
            />
          </n-form-item>
          <n-form-item label="bucket名称：" path="bucketName">
            <n-input
              v-model:value="storage.bucketName"
              :allow-input="noSideSpace"
              placeholder="请输入bucket名称"
              clearable
              class="!w-[300px]"
            />
          </n-form-item>
          <n-form-item label="地域节点：" path="endPoint">
            <n-input
              v-model:value="storage.endPoint"
              :allow-input="noSideSpace"
              placeholder="请输入地域节点"
              clearable
              class="!w-[300px]"
            />
          </n-form-item>
        </div>
      </MyTransition>

      <n-form-item label="设为默认：" path="isDefault">
        <n-switch
          v-model:value="storage.isDefault"
          :checked-value="1"
          :unchecked-value="0"
        />
      </n-form-item>
      <n-form-item label=" " v-permission="[PERMISSIONS.STORAGE_EDIT]">
        <n-button
          type="primary"
          class="grent-btn w-[120px]"
          @click="handleSave"
        >
          保存
        </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import type { VNodeChild } from 'vue'
import type { FormInst } from 'naive-ui'
import type {
  StorageOriginRes,
  StorageOriginUpdateReq
} from '@/types/storageOrigin'
import { PERMISSIONS } from '@/constants/permission'
import { storageOriginArr } from '@/constants/storageOrigin'
import { noSideSpace } from '@/utils'
import { convertBytes } from '@/utils'
import { handleNumberChange, renderDropLabel } from '@/utils/commonBusiness'
import { userMenuShow } from '@/hooks/useMenuShow'
import SvgIcon from '@/components/SvgIcon/index.vue'
import type { IndexObj } from '@/types/commom'

const { isSmall } = userMenuShow()

const handleByteChange = (value: any) => {
  const res = handleNumberChange(value)
  if (!res) {
    return
  }
  storage.sizeMax = res
}

const props = defineProps<{
  isModify: boolean
  storageRes?: StorageOriginRes
}>()

const emits = defineEmits<{
  (e: 'backView'): void
  (e: 'changeStorage', type: number, data: StorageOriginUpdateReq): void
}>()
const backView = () => {
  emits('backView')
}

const storage = reactive<StorageOriginUpdateReq>({
  name: '',
  type: 'LOCAL',
  sizeMax: '0',
  path: '',
  isDefault: 0
})

const initStorage = () => {
  if (props.isModify) {
    const { name, type, sizeMax, path, isDefault, id } =
      props.storageRes as StorageOriginRes

    storage.storageOriginId = id
    storage.name = name
    storage.type = type
    storage.sizeMax = sizeMax
    storage.path = path
    storage.isDefault = isDefault
  }
}

onMounted(() => {
  initStorage()
})

const formRule = {
  name: [
    {
      required: true,
      message: '请输入存储名称',
      trigger: ['blur']
    },
    {
      min: 1,
      max: 50,
      trigger: ['blur'],
      message: '长度在1-50位'
    }
  ],
  sizeMax: [
    {
      required: true,
      message: '请输入存储空间大小',
      trigger: ['blur']
    }
  ],
  path: [
    {
      required: true,
      message: '请输入存储目录',
      trigger: ['blur']
    }
  ],
  accessKey: [
    {
      required: true,
      message: '请输入Access key ID',
      trigger: ['blur']
    }
  ],
  accessSecret: [
    {
      required: true,
      message: '请输入Access Key Secret',
      trigger: ['blur']
    }
  ],
  bucketName: [
    {
      required: true,
      message: '请输入bucket名称',
      trigger: ['blur']
    }
  ],
  endPoint: [
    {
      required: true,
      message: '请输入地域节点',
      trigger: ['blur']
    }
  ]
}

const renderLabel = (option: IndexObj): VNodeChild => {
  return renderDropLabel(option.icon, option.label)
}

const storageFormRef = ref<FormInst | null>(null)

const handleSave = () => {
  storageFormRef.value?.validate((error: any) => {
    if (error) {
      return
    }
    if (props.isModify) {
      emits('changeStorage', 1, storage)
    } else {
      emits('changeStorage', 0, storage)
    }
  })
}
</script>

<style scoped lang="scss"></style>
